<!DOCTYPE html>
<html>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
   	<script src="../js/vue.js"></script>
   	<style>
   		.h1{
   			font-size: 28px;
   		}
   	</style>
</head>
<body style="width: 1200px;margin: 0 auto;background: beige;">
	<div id="counter">
		<simple-counter-1></simple-counter-1>
		<simple-counter-1></simple-counter-1>
		<simple-counter-1></simple-counter-1>
	</div>
	<div id='box'>
        <simple-counter-2></simple-counter-2>
		<simple-counter-2></simple-counter-2>
		<simple-counter-2></simple-counter-2>
	</div>
</body>
<script>
	Vue.component('simple-counter-1',{
		template:'<button v-on:click="counter++">{{counter}}</button>',
		// 技术上 data 的确是一个函数了，因此 Vue 不会警告，
  		// 但是我们返回给每个组件的实例的却引用了同一个data对象
  		data:{
  			counter:0
  		}
	});
	var app_1 = new Vue({
		el:'#counter'
	});
    /*对比上面的，给每个组件的counter单独加一个counter,返回全新的 data 对象*/
	Vue.component('simple-counter-2',{
		template:'<button v-on:click="counter++">{{counter}}</button>',
		// 技术上 data 的确是一个函数了，因此 Vue 不会警告，
  		// 但是我们返回给每个组件的实例的却引用了同一个data对象
  		data:function(){
  			return {
  				counter:0
  			}
  		}
	});
	var app_2 = new Vue({
		el:'#box'
	});
</script>
</html>
